<!-- 分类详情 -->
<template>
  <div class="SortDetail">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="商品详情">
      <template #left>
        <van-icon name="arrow-left" color="#fff" @click="goBack">返回</van-icon>
      </template>
      <template #right>
        <router-link to="/favorites">收藏夹</router-link>
      </template>
    </van-nav-bar>
    <van-notice-bar left-icon="volume-o" text="年底促销,商店商品全场九折,更多优惠敬请关注官方网站。"/>
    <!-- 加载动画 -->
    <xrzp-Loading v-if="!SortDetail"></xrzp-Loading>
    <template v-if="SortDetail">
      <div class="box">
        <img :src="SortDetail.pic" width="100%" />
        <div class="group">
          <div class="group-title">
            <div>
              <h4>{{ SortDetail.name }}</h4><br />
              <span>鲜嫩爽口 清香入味</span><br />
              <span><van-tag type="primary">全面质检</van-tag></span>
            </div>
            <div class="price">
              <van-tag type="danger">九折</van-tag>
              ¥{{ price }} 
              <span class="originPrice">¥{{ originPrice }}</span>
            </div>
          </div>
          <div class="group-box">
            <span>配送</span>
            <span>立即下单,预计 今日17:21送达</span><br />
            <span>促销</span>
            <span>满9.9可换购超值商品</span><br />
            <span>已领券</span>
          </div>
        </div>
      </div>

      <!-- 底部购买按钮 -->
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" dot to="/customerService"/>
        <van-goods-action-icon icon="cart-o" text="购物车" :badge="num" to="/myCart" v-if="num"/>
        <van-goods-action-icon icon="cart-o" text="购物车" to="/myCart" v-else/>
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" @click="addFavorite" v-if="isFavorite"/>
        <van-goods-action-icon icon="star-o" text="收藏" @click="addFavorite" v-else/>
        <van-goods-action-button type="warning" text="加入购物车" @click="addCart"/>
        <van-goods-action-button type="danger" text="立即购买" @click="submit"/>
      </van-goods-action>

      <!-- 付款弹窗 -->
      <van-dialog v-model="show" title="付款确认" show-cancel-button @confirm="buy" @cancel="notBuy" class="popup">
        <div class="introduction">个人钱包: <span>¥{{ remainingSum.toFixed(2) }}</span> </div>
        <div class="introduction">商品价格: <span>¥{{ price }}</span> </div>
        <div class="introduction">下单后余额: <span>¥{{ (remainingSum-price).toFixed(2) }}</span> </div>
      </van-dialog>
    </template>
  </div>
</template>

<script>
import { axios_detail } from "@/api/data_axios";
import { Dialog,Toast } from 'vant';
import { mapState } from "vuex";
export default {
  data() {
    return {
      SortDetail:null,
      id:"",
      appkey:"13e76141171ebe61f22e24477b559988",
      show:false,       // 付款 订单 弹窗
      isFavorite:false, // 收藏状态
    };
  },
  computed:{
    ...mapState(["myCart","favorite","remainingSum"]),
    num(){
      let sum = 0;
      this.myCart.forEach(item=>{
        sum += item.count ;      
      })
      return sum
    },
    price(){
      return (this.originPrice*0.9).toFixed(2); 
    },
    originPrice(){
      return Math.round(Math.round(15 +  this.id.substring(0,3) *0.01).toFixed(2)/0.9).toFixed(2);
    }
  },
  mounted(){
    this.id=this.$route.params.id;
    this.getData();
    this.init();
  },
  methods:{
    //请求数据
    getData(){
      let data = {
        id:this.id,
        appkey:this.appkey
      }
      axios_detail(data).then(res=>{
        this.SortDetail = res.result.result;
      })
    },
    // 初始化收藏状态
    init(){
      this.isFavorite = this.favorite.indexOf(this.id) !== -1 ;
    },
    // 添加购物车
    addCart() {
      Toast.success('添加成功');
      this.$store.commit("addCart",this.id);
    },
    // 加入收藏夹
    addFavorite() {
      this.isFavorite = !this.isFavorite;
      this.$store.commit( this.isFavorite ? "addFavorite" : "delFavoriteID",this.id);
    },
    // 立即购买
    submit(){
      if (this.remainingSum - this.price >= 0) {
        this.show = !this.show;
      } else {
        Dialog.alert({
          title: '提示',
          message: '钱包余额不足',
          theme: 'round-button',
          confirmButtonText:'去充值',
        }).then(() => {
          this.$router.push({ path: "/wallet" });
        });
      }
    },
    // 确认购买
    buy(){
      Dialog.alert({
        title: '提示',
        message: '下单成功',
        theme: 'round-button',
      });
      this.$store.commit("addMoney", this.price*-1);
      let time = this.$moment(new Date()).format("YYYY年MM月DD日 HH:mm");
      let time1 = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
      let details={
            time:time1,
            commodity:[
              { name:this.SortDetail.name,num:1,price:this.price },
            ]
          }
      this.$store.commit("addBill", [0,this.price*-1,"消费 - 购物消费",time,details]);
    },    
    // 取消购买
    notBuy(){
      Dialog.alert({
        title: '提示',
        message: '未购买',
        theme: 'round-button',
      })
    },    
    // 返回方法
    goBack() {
      this.$router.go(-1);
    },
  }
};
</script>

<style lang="scss" scoped>
.SortDetail {
  .van-nav-bar {
    background-color: $base-color;
    ::v-deep .van-nav-bar__title{
      font-weight: bold;
    }
    .van-icon{
      font-weight: bold;
    }
  }
  .van-nav-bar__right a {
    color: white;
    font-weight: bold;
  }
  .van-notice-bar{
    position: fixed;
    width: 100%;
  }
  .group{
    text-align: justify;
    margin-left: 10px;
    h4{
      display: inline;
    }
    span{
      font-size: 13px;
    }
    &-title{
      margin-bottom: 10px;
      line-height: 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      :nth-child(3){
        color: #A4A4A5;
      }
      .price{
        position: relative;
        font-size: 24px;
        color: red;
        right: 10px;
        font-style: italic;
        .originPrice{
          color: #969799;
          font-size: 10px;
          text-decoration: line-through;
        }
      }
    }
    &-box{
      margin-bottom: 10px;
      line-height: 35px;
      // 使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
      :nth-child(3n+1){
        margin-right: 20px;
        font-weight:bolder;
      }
    }
  }
  .van-popup{
    position: absolute;
  }
  .popup{
    font-weight: bold;
    ::v-deep .van-dialog__header{
      font-weight: bold;
    }
    .introduction{
      text-align: center;
      margin-top: 5px;
      font-weight: 500;
      span{
        color: red;
        font-weight: bold;
      }
    }
    div:last-child{
      margin-bottom: 10px;
    }
  }
}
</style>